<template>
  <div>
      <div class="menu">
        <Menu mode="horizontal" :theme="theme1" active-name="1" @on-select="choose">
            <Menu-item name="index">
                <div style="width:450px">
                    <img src="/static/images/logo.png">
                </div>
            </Menu-item>
            <Submenu name="originData">
                <template slot="title">
                    <Icon type="ios-paper"></Icon>
                    运行管理
                </template>
                <Menu-item name="placeManage">场所管理</Menu-item>
                <Menu-item name="diviceManage">设备管理</Menu-item>
            </Submenu>
            <Submenu name="originData">
                <template slot="title">
                    <Icon type="stats-bars"></Icon>
                    源数据
                </template>
                <Menu-item name="originData">审计数据</Menu-item>
                <Menu-item name="probeData">探针数据</Menu-item>
            </Submenu>
            <Submenu name="3">
                <template slot="title">
                    <Icon type="stats-bars"></Icon>
                    智能分析
                </template>
                <Menu-item name="3-1">智能搜索</Menu-item>
                <Menu-item name="3-2">特征碰撞分析</Menu-item>
                <Menu-item name="3-3">特征轨迹分析</Menu-item>
                <Menu-item name="3-4">同行伴随分析</Menu-item>
                <Menu-item name="3-5">特征关联挖掘</Menu-item>
            </Submenu>
            <Menu-item name="6">
                <Icon type="settings"></Icon>
                系统设置
            </Menu-item>
            <div class="logout pull-right">
                <Icon type="log-out"></Icon>
                <span @click="logOut()">退出</span>
            </div>
        </Menu>
      </div>
      <div class="search">
        <Input v-model="searchInfo" icon="ios-search-strong" size="large" @on-click="search()" @on-enter="search" placeholder="请输入..." style="width: 220px"></Input>
      </div>
  </div>
</template>
<script>
// import axios from 'axios'
export default {
    data () {
        return {
            theme1: 'dark',
            searchInfo: ''
        }
    },
    methods: {
        search () {
            const msg = this.$Message.loading({
                content: '正在加载中...',
                duration: 0
            });
            this.$router.push({ name: 'search', params: { info: this.searchInfo }})
        },
        // 注销
        logOut () {
            localStorage.removeItem('adminName')
            localStorage.removeItem('adminPassword')
            this.$router.replace('/login')
        },
        choose (toRouter) {
            this.$router.replace({name:toRouter})
        }
    }
}
</script>
<style lang="scss" scoped>
.ivu-menu-dark {
    background: #252628;
}
.ivu-menu-horizontal {
    height: 72px;
    line-height: 75px;
    box-shadow: 3px 3px 3px 3px;
    font-weight: 500;
}
.ivu-menu-item,.ivu-menu{
    font-size: 16px
}
.ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item{
    margin: 0;
    line-height: 30px;
    padding: 7px 16px;
    clear: both;
    color: #495060;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    height:40px
}
.ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item-selected,
.ivu-menu-horizontal .ivu-menu-submenu .ivu-select-dropdown .ivu-menu-item-selected:hover {
    color: #fff;
    background: #495060;
}
.logout{
    width: 200px;
    text-align: center;
    font-size: 15px;
    color: white;
    span{
        margin-left: 10px;
        cursor: pointer;
    }
}
.menu{
    width: 100%;
}
.search{
    width: 200px;
    float: right;
    margin-top: 10px;
    margin-right: -150px;
}
</style>
